<template>
	<view class="page_box">
		<!-- 步骤条 -->
		<!-- <StepBar :currentStep="currentStep"></StepBar> -->
		<view class="steps">
			<TnSteps v-model="currentStep" mode="dotIcon" active-color="#EA4E34" disabled>
				<TnStepsItem v-for="(item, index) in stepsData" :color="item.color" :key="index" active-color="#EA4E34"
					:title="item.title" :activeIcon="item.activeIcon" />
			</TnSteps>
		</view>
		<!-- 表单 -->
		<up-form class="mb--20rpx" labelPosition="left" labelWidth="240rpx" :model="formData" :rules="rules"
			ref="upForm">
			<!-- 标题 -->
			<view class="title_box">
				<view class="title_block">
				</view>
				<view class="title_content">
					营业执照信息
				</view>
			</view>
			<up-form-item label="公司名称" prop="corporateName" borderBottom class="form_style">
				<up-input v-model="formData.corporateName" disabled border="none" placeholder="请输入"></up-input>
			</up-form-item>
			<up-form-item label="统一社会信用代码" prop="unifiedSocialCreditCode" borderBottom class="form_style">
				<up-input v-model="formData.unifiedSocialCreditCode" disabled border="none" placeholder="请输入"></up-input>
			</up-form-item>
			<up-form-item label="法人姓名" prop="legalPersonName" borderBottom class="form_style">
				<up-input v-model="formData.legalPersonName" disabled border="none" placeholder="请输入"></up-input>
			</up-form-item>
			<!-- 标题 -->
			<view class="title_box">
				<view class="title_block">
				</view>
				<view class="title_content">
					申请信息
				</view>
			</view>
			<up-form-item label="申请金额(元)" prop="applicationsAmount" borderBottom class="form_style">
				<up-input v-model="formData.applicationsAmount" disabled border="none" placeholder="请输入"></up-input>
			</up-form-item>
			<up-form-item label="申请期限"   prop="applicationDeadline" borderBottom class="form_style">
				<up-input  v-model="formData.applicationDeadline" disabled border="none" placeholder="请选择"></up-input>
				<!-- <template #right>
					<up-icon
						name="arrow-right"
					></up-icon>
				</template> -->
			</up-form-item>
			<up-form-item label="还款方式" prop="repaymentMethod" borderBottom class="form_style">
				<up-input v-model="formData.repaymentMethod" disabled border="none" placeholder="请输入"></up-input>
				<!-- <template #right>
					<up-icon
						name="arrow-right"
					></up-icon>
				</template> -->
			</up-form-item>
			<up-form-item label="房产地址" prop="propertyAddress" borderBottom class="form_style">
				<up-input v-model="formData.propertyAddress" disabled border="none" placeholder="请输入"></up-input>
			</up-form-item>
			<up-form-item label="房产性质" prop="propertyNature" borderBottom class="form_style">
				<up-input v-model="formData.propertyNature" disabled border="none" placeholder="请输入"></up-input>
			</up-form-item>
			<up-form-item label="客户经理工号" prop="customerManagerJobNumber" borderBottom class="form_style">
				<up-input v-model="formData.customerManagerJobNumber" disabled border="none" placeholder=""></up-input>
			</up-form-item>
		</up-form>
		<!-- 标题 -->
		<view class="title_box">
			<view class="title_block">
			</view>
			<view class="title_content">
				影像采集
			</view>
		</view>
		<view class="file_box">
			<div class="image_box" v-for="(item,index) in formData.fileList" :key="item.url">
				<image :src="item.url" class="image_lists">
				</image>
				<!-- <view class="image_icon" @click="deletePic(index)">
					<up-icon name="close-circle"></up-icon>
				</view> -->
			</div>
			<up-upload v-if="formData.fileList.length<2" :fileList="fileList" @afterRead="afterRead" multiple
				:maxCount="1">
				<view class="upload_btn">
					<up-icon name="plus" size="28"></up-icon>
					<view class="upload_btn--title">
						身份证正反面
					</view>
				</view>
			</up-upload>
		</view>
		<view class="footer">
			<!-- 以下形式在微信小程序会无效，APP和H5有效  -->
			<view class="custom-style" @click="handleSubmit">提交</view>
		</view>
		<!-- 申请期限弹出框 -->
		<uni-popup ref="popup_term" :mask-click="true" background-color="#fff">
			<view class="term">
				<view class="term-list" @click="setMode(item,'popup_term','applicationDeadline')" v-for="(item,index) in termList" :key="index">
					{{item}}
				</view>
			</view>
		</uni-popup>
		<!-- 还款方式 -->
		<uni-popup ref="popup_mode" :mask-click="true" background-color="#fff">
			<view class="term">
				<view class="term-list" @click="setMode(item,'popup_mode','repaymentMethod')" v-for="(item,index) in modeList" :key="index">
					{{item}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import TnSteps from '@/uni_modules/tuniaoui-vue3/components/steps/src/steps.vue'
	import TnStepsItem from '@/uni_modules/tuniaoui-vue3/components/steps/src/steps-item.vue'
	import StepBar from '@/components/stepBar/stepBar.vue'
	export default {
		components:{
			TnSteps,
			TnStepsItem,
		},
		data() {
			return {
				formData: {
					fileList: [],
					// corporateName:'卡迪尔技术有限公司',
					// unifiedSocialCreditCode:97851214545151,
					// legalPersonName:'李思达',
					// applicationsAmount:100000,
					// applicationDeadline:6,
					// repaymentMethod:'等额本息',
					// propertyAddress:8541521585212,
					// propertyNature:18596852563,
					// customerManagerJobNumber:125242
				},
				fileList:[
					// {
					// 	url:'/static/card1.png'
					// },
					// {
					// 	url:'/static/card2.png'
					// },
				],
				options: [{
						label: '选择1',
						value: 1,
					},
					{
						label: '选择2',
						value: 2,
					},
					{
						label: '选择3',
						value: 3,
					}
				],
				termList:[3,6,9,12],
				modeList:['等额本金','等额本息','到期一次性还本付息','按频率付息，到期一次还本'],
				currentStep:3,
				stepsData: [{
						title: '贷款信息',
						color: '#999999',
						activeIcon: 'circle-fill'
					},
					{
						title: '授权页面',
						color: '#999999',
						activeIcon: 'circle-fill'
					},
					{
						title: 'e签宝授权',
						color: '#999999',
						activeIcon: 'circle-fill'
					},
					{
						title: '信息确认',
						color: '#999999',
						activeIcon: 'circle-fill'
					}
				]
			}
		},
		onLoad() {
			this.formData = uni.getStorageSync('formData')?JSON.parse(uni.getStorageSync('formData')):{}
		},
		methods: {
			deletePic(index) {
				this.formData.fileList = this.formData.fileList.filter((item, itemindex) => itemindex != index)
			},
			afterRead(file, lists, name) {
				console.log('file',file,'lists',lists)
				this.formData.fileList = [
					...this.formData.fileList,
					{
						url: file.file[0].url
					}
				]
			},
			handleMode(name){
				this.$refs[name].open('bottom')
			},
			setMode(val,name,value){
				this.formData[value] = val;
				this.$refs[name].close();
			},
			handleSubmit(){
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
		},
		computed: {
			rules() {
				return {
					'formData.name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page_box {

		// background-color: #f0f2f5;
		.mb--20rpx {
			margin-bottom: 20rpx;
			padding:0 20rpx;
		}
		.title_box {
			padding: 35rpx 40rpx;
			background-color: #f9f9f9;
			display: flex;
			align-items: center;

			.title_block {
				width: 6rpx;
				height: 18rpx;
				background: linear-gradient(0deg, #FE726F, #F44944);
			}

			.title_content {
				margin-left: 8px;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
		}
		
		.form_style {
			background-color: #ffffff;
			padding: 30rpx 50rpx;
		}

		.file_box {
			padding: 50rpx;
			display:flex;
			.image_box {
				position: relative;
				margin-right: 22rpx;
				margin-bottom: 22rpx;
				width: 324rpx;
				height: 206rpx;

				.image_lists {
					width: 324rpx;
					height: 206rpx;
					box-shadow: 0rpx 2rpx 0rpx 0rpx rgba(24, 24, 24, 0.21);

				}

				.image_icon {
					position: absolute;
					top: -8rpx;
					right: -8rpx;
				}
			}

			.upload_btn {
				width: 202rpx;
				height: 202rpx;
				background: #FAFAFA;
				border-radius: 10rpx;
				border: 2px solid #E8E8E8;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.upload_btn--title {
					font-family: PingFang SC;
					font-weight: bold;
					font-size: 20rpx;
					color: #999999;
				}
			}
		}

		.footer {
			padding: 36rpx 54rpx;
			background-color: #f1f1f1;

			.custom-style {
				text-align: center;
				line-height: 88rpx;
				height: 88rpx;
				background: linear-gradient(0deg, #FE726F, #F44944);
				box-shadow: 0rpx 7rpx 27rpx 0rpx rgba(243, 74, 70, 0.3);
				border-radius: 44rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}
	}
	.term{
		padding:30rpx 0;
		&-list{
			display: flex;
			justify-content: center;
			padding:20rpx;
		}
	}
	::v-deep .u-form-item{
		padding:0 40rpx;
	}
	::v-deep .u-upload__wrap__preview{
		width: 310rpx;
		height: 206rpx;
		display:flex;
	}
	::v-deep .u-upload__wrap__preview__image{
		width: 310rpx !important;
		height: 206rpx !important;
	}
	.steps{
		margin:40rpx;
	}
</style>